<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>运单录入</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/css/oksub.css">
<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
	<div class="ok-body">
	
	<form class="layui-form" lay-filter="filter">
	
				<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="button" class="layui-btn  layui-btn-normal layui-icon" lay-filter="increase" id="increase" value="&#xe608;添加单号"/>
					<input type="button" class="layui-btn  layui-btn-normal layui-icon"  lay-filter="fileCommit" id="fileCommit" value="&#xe681;附件上传"/>
					<input type="button" class="layui-btn layui-btn-warm layui-icon" lay-submit lay-filter="printing" id="printing" value="&#xe857;打印运单" />
					<button class="layui-btn" lay-submit lay-filter="add">
						<i class="layui-icon">&#xe605;</i>提交运单
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">
						<i class="layui-icon">&#xe669;</i>重置
					</button>
				</div>
			</div>
	
			<div class="layui-fluid" id="LAY-component-grid-stack">
		<div class="layui-row layui-col-space10">
			<!-- 基本信息模块 -->
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header" style="background-color: #eeeeee;font-size:14px;line-height: 36px; font-weight:600;height:35px;border-bottom: 1px solid #e6e6e6;">基本信息</div>
					<div class="layui-card-body" style="padding:10px 0px;">
						
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">运单编号：</label>
								<div class="layui-inline">
									<input  style="width:146px;" type="text" id="waybillId" name="waybillId" autocomplete="off" placeholder="请输入运单编号" class="layui-input" required="required" readonly="readonly" >
								</div>
							</div>

							<!--  寄件区间-->
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">寄件区间：</label>
								<div class="layui-inline" >
									<select name="sendingId" id="sendingId" class="layui-select" lay-filter="sendingId" lay-verify="required" lay-search="true" >
										<option value="">请选择寄件区间</option>
										<option  th:each="s:${sending}" th:value="${s.id}"  th:text="${s.rangeName}" />
									</select>

								</div>
							</div>

							<!--  目的区间 -->
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">目的区间：</label>
								<div class="layui-inline" >
									<select name="destId" id="destId" class="layui-select" lay-filter="destId" lay-verify="required" lay-search="true" >
										<option value="">请选择目的区间</option>
										<option  th:each="spot:${spots}" th:value="${spot.id}"  th:text="${spot.rangeName}" />
									</select>
								
								</div>
							</div>

							<!-- 目的地 -->
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">目的地：</label>
								<div class="layui-inline" >
									<select name="destinationId" id="destinationId" class="layui-select" lay-filter="destinationId" lay-verify="required" lay-search="true" >
										<option value="">请选择目的地</option>
										<option  th:each="dest:${destinations}" th:value="${dest.id}"  th:text="${dest.name}" />
									</select>

								</div>
							</div>


							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">取件员：</label>
								<div class="layui-inline" style=" width: 146px; margin-bottom:10px;" >
									<select name="takerId" class="layui-select" lay-filter="takerId" lay-verify="required" lay-search="true" >
										<option value="">请选择取件员</option>
										<option  th:each="pickup:${pickups}" th:value="${pickup.staffId}"  th:text="${pickup.name}" />
									</select>
								
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">寄件时间：</label>
								<div class="layui-inline">
									<input name="sendTime"  type="text" class="layui-input" id="sendTime" lay-key="1">
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">快件类型：</label>
								<input type="hidden" name="expressTypeName" />
								<div class="layui-inline" style=" width: 146px;margin-bottom:10px;">
									<select name="expressTypeId" id="expressTypeId" class="layui-select" lay-filter="expressTypeId" lay-verify="required" lay-search="true" >
										<option value="">请选择快件类型</option>
										<option  th:each="shift:${shifts}" th:value="${shift.dictId}"  th:text="${shift.dictItemName}" />
									</select>
								</div>
							</div>
							<!-- 运输方式 -->
							<div class="layui-inline">
								<label class="layui-form-label">运输方式：</label>
								<div class="layui-inline" style="margin-bottom:10px;" >
									<select name="transportMethodId" class="layui-select" lay-filter="transportMethodId" lay-verify="required" lay-search="true" >
										<option value="">请选择运输方式</option>
										<option  th:each="transport:${transports}" th:value="${transport.dictId}"  th:text="${transport.dictItemName}" />
									</select>

								</div>
							</div>


							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">目的网点：</label>
								<input type="hidden" name="networkName" id="networkName"/>
								<div class="layui-inline" >
									<select name="transportNetworkId" class="layui-select" lay-filter="transportNetworkId" lay-verify="required" lay-search="true" >
										<option value="">请选择目的网点</option>
										<option  th:each="network:${networks}" th:value="${network.networkId}"  th:text="${network.networkName}" />
									</select>
					</div>
				</div>
			</div>
			
			<!--  寄件人信息模块 -->
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header" style="background-color: #eeeeee;font-size:14px;line-height: 36px; font-weight:600;height:35px;border-bottom: 1px solid #e6e6e6;">寄件信息</div>
					<div class="layui-card-body" style="padding:10px 0px;">
							<label class="layui-form-label">高级客户：</label>
							<div class="layui-inline" style="margin-bottom: 10px ; width:180px;" >
								<select name="vipId" id="vipId" class="layui-select" lay-filter="vipId" lay-verify="required" lay-search="true" >
									<option value="">请选择高级客户</option>
									<option  th:each="customer:${customers}" th:value="${customer.clientId}"  th:text="${customer.clientName}" />
								</select>

							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">寄件人：</label>
								<div class="layui-input-block" style=" position: relative;width:180px;">
									<input style="width:150px;" type="text" id="senderName" name="senderName" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">手机：</label>
								<div class="layui-input-block" >
									<input style="width:150px;" type="text" lay-filter="senderPhonenumber" lay-verify="phone" id="senderPhonenumber" name="senderPhonenumber" autocomplete="off" placeholder="请输入" class="layui-input" ><div class="layui-form-autocomplete" >
									<dl class="layui-anim layui-anim-upbit">
									</dl>
								</div>

								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">身份证：</label>
								<div class="layui-input-block" style="width:215px;">
									<input  type="text" id="senderIdcard" name="senderIdcard" autocomplete="off" placeholder="请输入" class="layui-input" lay-filter="identity" lay-verify="senderIdcard" >
								</div>
							</div>
							
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">邮编：</label>
								<div class="layui-input-block" style="">
									<input style="width:150px;" type="text" id="senderPost" name="senderPost" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input" lay-filter="senderPost">
								</div>
							</div>

						<div class="layui-form-item" id="area-picker">
							<div class="layui-form-label">省份：</div>
							<div class="layui-input-inline" >
								<select name="sendProvince" id="sendProvince" class="province-selector" lay-filter="sendProvince" lay-verify="required" lay-search="true">
									<option value="">请选择省</option>
								</select>
							</div>
							<div class="layui-form-label">城市：</div>
							<div class="layui-input-inline" >
								<select name="sendCity" id="sendCity" class="city-selector" lay-filter="sendCity" lay-verify="required" lay-search="true">
									<option value="">请选择市</option>
								</select>
							</div>
							<div class="layui-form-label" style="margin-top:10px">区域：</div>
							<div class="layui-input-inline" style="margin-top:10px">
								<select name="sendArea" id="sendArea" class="county-selector" lay-filter="sendArea" lay-verify="required" lay-search="true">
									<option value="">请选择区</option>
								</select>
							</div>
						</div>

						<br>
						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">详细地址：</label>
							<div class="layui-input-block" >
								<div style="display:flex;align-items: center;">
									<input style="width:300px;" id="detailedAddress" type="text" name="detailedAddress" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>
						</div>


					</div>
				</div>
			</div>
			
			<!-- 收件人信息模块 -->
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header" style="background-color: #eeeeee;font-size:14px;line-height: 36px; font-weight:600;height:35px;border-bottom: 1px solid #e6e6e6;">收件信息</div>
					<div class="layui-card-body" style="padding:10px 0px;">
						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">收件人：</label>
							<div class="layui-input-block" style="">
								<input style="width:150px;" type="text" id="recipient" name="recipient" autocomplete="off" placeholder="请输入" class="layui-input"><div class="layui-form-autocomplete"><dl class="layui-anim layui-anim-upbit"></dl></div>
							</div>
						</div>

						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">手机：</label>
							<div class="layui-input-block" style="">
								<input style="width:150px;" id="recipientPhonenumber" type="text" lay-verify="phone" name="recipientPhonenumber" autocomplete="off" placeholder="请输入" class="layui-input" ><div class="layui-form-autocomplete" >
								<dl class="layui-anim layui-anim-upbit"></dl></div>
							</div>
						</div>

						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">公司：</label>
							<div class="layui-input-block" style="">
								<input style="width:150px;" id="recipientCompany" type="text" name="recipientCompany" autocomplete="off" placeholder="请输入" class="layui-input">
							</div>
						</div>

						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">身份证号：</label>
							<div class="layui-input-block" style="">
								<input style="width:150px;" id="recipientIdcard" type="text" lay-verify="identity" name="recipientIdcard" autocomplete="off" placeholder="请输入" class="layui-input" >
							</div>
						</div>

						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">邮编：</label>
							<div class="layui-input-block" style="">
								<input style="width:150px;" type="text" id="recipientPostcode" lay-verify="required" name="recipientPostcode" autocomplete="off" placeholder="请输入" class="layui-input">
							</div>
						</div>
						<br>

						<div class="layui-form-item" id="area2">
							<div class="layui-form-label">省份：</div>
							<div class="layui-input-inline" >
								<select name="recipientProvince" id="recipientProvince" class="province-selector" lay-filter="recipientProvince" lay-verify="required" lay-search="true" >
									<option value="">请选择省</option>
								</select>
							</div>
							<div class="layui-form-label">城市：</div>
							<div class="layui-input-inline" >
								<select name="recipientCity" id="recipientCity" class="city-selector" lay-filter="recipientCity" lay-verify="required" lay-search="true">
									<option value="">请选择市</option>
								</select>
							</div>
							<div class="layui-form-label" style="margin-top:10px">区域：</div>
							<div class="layui-input-inline" style="margin-top:10px">
								<select name="recipientArea" id="recipientArea" class="county-selector" lay-filter="recipientArea" lay-verify="required" lay-search="true">
									<option value="">请选择区</option>
								</select>
							</div>
						</div>
						
						<br>
						<div class="layui-inline" style="margin-bottom:10px">
							<label class="layui-form-label">详细地址：</label>
							<div class="layui-input-block" style="">
								<input style="width:300px;" id="recipientDetailedAddress" type="text" name="recipientDetailedAddress" autocomplete="off" placeholder="请输入" class="layui-input">
							</div>
						</div>

					</div>
				</div>
			</div>
			<!-- 物品信息模块 -->
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header" style="background-color: #eeeeee;font-size:14px;line-height: 36px; font-weight:600;height:35px;border-bottom: 1px solid #e6e6e6;">物品信息</div>
					<div class="layui-card-body" style="padding:10px 0px;">

							<div class="layui-inline">
								<label class="layui-form-label">物品类型：</label>
								<div class="layui-inline" style=" width: 150px;margin-bottom:10px;">
									<select name="itemTypeId" id="itemTypeId" class="layui-select" lay-filter="itemTypeId" lay-verify="required" lay-search="true" >
										<option value="">请选择物品类型</option>
										<option  th:each="product:${products}" th:value="${product.dictId}"  th:text="${product.dictItemName}" />
									</select>
								</div>
							</div>
							<!-- </form> -->

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">物品名称：</label>
								<div class="layui-input-block" style="">
									<input style="width:150px;" type="text" id="itemName" name="itemName" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">件数：</label>
								<div class="layui-input-block" style="">
									<input style="width:150px;" id="number" lay-verify="positiveInteger" type="number" name="number" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">重量/kg：</label>
								<div class="layui-input-block" style="">
									<input id="weight" style="width:150px;" lay-verify="positiveNumber" type="text" name="weight" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>


							
							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">体积：</label>
								<div class="layui-input-block">
									<input id="volume" style="width:150px;" type="number" lay-verify="positiveNumber" name="volume" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">备注：</label>
								<div class="layui-input-block" style="">
									<input id="remarks" style="width:384px;" type="text" name="remarks" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

					</div>
				</div>
			</div>
			<!-- 费用信息模块 -->
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header" style="background-color: #eeeeee;font-size:14px;line-height: 36px; font-weight:600;height:35px;border-bottom: 1px solid #e6e6e6;">费用信息</div>
					<div class="layui-card-body" style="padding:10px 0px;">
							<div class="layui-inline" style="margin-bottom:10px;">
								<label class="layui-form-label">付款方式：</label>
								<input type="hidden" name="paymentMethodName">
								<div class="layui-inline" style="width: 150px">
									<select name="paymentMethodId" class="layui-select" lay-filter="paymentMethodId" lay-verify="required" lay-search="true" >
										<option value="">请选择付款方式</option>
										<option  th:each="payment:${payments}" th:value="${payment.dictId}"  th:text="${payment.dictItemName}" />
									</select>
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">保价费：</label>
								<div class="layui-input-block" style="">
									<input id="insuranceCharge" style="width:150px;" lay-verify="positiveNumber" type="number" name="insuranceCharge" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">服务费：</label>
								<div class="layui-input-block" style="">
									<input style="width:150px;" type="number" id="serviceCharge" lay-verify="positiveNumber" name="serviceCharge" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">其他费用：</label>
								<div class="layui-input-block" style="">
									<input id="otherCharge" style="width:150px;" type="number" lay-verify="positiveNumber" name="otherCharge" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-inline" style="margin-bottom:10px">
								<label class="layui-form-label">代收货款：</label>
								<div class="layui-input-block" style="">
									<input style="width:150px;" id="collectionOnDelivery" type="number" lay-verify="positiveNumber" name="collectionOnDelivery" autocomplete="off" placeholder="请输入" class="layui-input">
								</div>
							</div>


 							
							<div class="layui-inline" style="">
								<label class="layui-form-label">运费：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<input style="width:80px;" type="number" lay-verify="positiveNumber" id="freight" name="freight" autocomplete="off" placeholder="请输入" class="layui-input" readonly="readonly"/>
									</div>
									<div class="layui-inline">
										<input class="layui-btn" type="button" id="total"  name="total"  style="height:33px;line-height: 33px;width: 67px" value="报价" >
									</div>
								</div>
							</div>

							<div class="layui-inline" >
								<div style="display:flex;margin-left:30px; font-size: 18px;font-weight: bold;">
									<label style="padding-top:10px;color:red">总金额：</label>
									<div class="layui-input-block" name="count" style="margin-left: 0px;padding-top: 7px;font-size:20px;color:#ff81bd;margin-top:4px;">
										<input style="width:80px;" type="number" lay-verify="required"  id="totalMoney" name="totalMoney" autocomplete="off" class="layui-input" readonly="readonly" >

									</div>

								</div>
							</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</form>
	</div>
	
	<!--js逻辑-->
	<script src="/lib/layui/layui.js"></script>
	<script>
		//配置插件目录
		layui.config({
			base: '/lib/mods/'
			, version: '1.0'
		});
		//一般直接写在一个js文件中
		layui.use(['layer', 'form', 'layarea'], function () {
			var layer = layui.layer
					, form = layui.form
					, layarea = layui.layarea;

			layarea.render({
				elem: '#area-picker',
				change: function (res) {
					//选择结果
					console.log(res);
				}
			});
			layarea.render({
				elem: '#area2',
				change: function (res) {
					//选择结果
					console.log(res);
				}
			});
		});

	layui.use(["element", "form", "laydate", "okLayer", "okUtils","jquery","upload"], function () {

				var form = layui.form;
				var laydate = layui.laydate;
				var okLayer = layui.okLayer;
				var okUtils = layui.okUtils;
				var upload = layui.upload;
				var layer = parent.layer === undefined ? layui.layer : parent.layer;
				var $ = layui.jquery;
				var evel = 0;
				okLoading.close();

				laydate.render({
					elem: '#sendTime' //指定元素
					,value: new Date()
		});

		form.verify({
			positiveInteger: [
				    /^[1-9]\d*$/
				    ,'必须为正整数'
				  ] 
			  //我们既支持上述函数式的方式，也支持下述数组的形式
			  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
			  ,positiveNumber: [
			    /^(0|[1-9][0-9]*)(\.\d+)?$/
			    ,'必须为正数'
			  ] 
			});

		// 添加单号事件
		$("#increase").click(function () {
			var waybillId = $("#waybillId").val();
			if(waybillId != '' ) {
				layer.open({
					title: '信息提示'
					,content: '单号为'+waybillId+'的运单未填写完成'
				})
			} else {
				$.post("/api/waybill/increase/"+waybillId, function (data, status) {
					// 成功的回调函数，解析结果
					if (data.code != 0) {
						layer.open({
							title: '信息提示'
							,content: data.msg
						});
					} else {
						$("#waybillId").attr("value", data.data);
					}
				})
			}

		})
		// 提交运单事件
		form.on("submit(add)", function (data) {
			evel = 1;
			okUtils.ajax("/api/waybill/add", "post", data.field, true).done(function (response) {
				console.log(response);
				okLayer.greenTickMsg("添加成功", function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
					layer.close(layer.index);
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});
		// 打印运单事件
		form.on("submit(printing)", function () {

			var waybillId = $("#waybillId").val();
			if (evel != 1) {
				layer.open({
					title: '信息提示'
					,content: '请先提交运单数据，然后在进行打印'
				});
			}else if (waybillId == '') {
				layer.open({
					title: '信息提示'
					,content: '暂无表单数据，请先添加单号'
				});
			} else {
					// 成功的回调函数，解析结果
					console.log("回调");
					var index = layui.layer.open({
						title : "运单打印",
						type : 2,
						area: ['820px','600px'],
						content : "/page/waybill/printing/"+waybillId
					})
			}
		})
		// 附件上传事件
			upload.render({
				elem: '#fileCommit' //绑定元素
				,url: '/api/waybill/fileUpload' //上传接口
				,accept : 'file'
				,data : {
					waybillId:function () {
						return $("#waybillId").val();
					}
				}
				,done: function(res){
					console.log(res);
					//上传完毕回调
						okLayer.greenTickMsg(res.msg,null);
				}
				,error: function(error){
					//请求异常回调
					console.log(error);
					okLayer.redCrossMsg(res.msg,null);
				}
			});

		// 高级客户选中后回填信息事件

		// 报价事件
		$("#total").click(function () {
			// 所需判断条件信息
			var send = $("#sendingId").val();//寄件ID
			var destination = $("#destId").val();//目的区间
			var shift = $("#expressTypeId").val();//快件类型
			var itemType = $("#itemTypeId").val();//物品类型
			var vip = $("#vipId").val();//高级用户id
			var weights = $("#weight").val();//重量

			// 执行时所需信息
			var insuranceCharge = $("#insuranceCharge").val();//保价费
			var serviceCharge = $("#serviceCharge").val();//服务费
			var otherCharge = $("#otherCharge").val();//其他费用

			 if(destination == '' || shift == '' || itemType == '' || send == '' || weights == '' || insuranceCharge == '' || serviceCharge == '' || otherCharge == ''){
				layer.open({
					title: '信息提示'
					,content: '重要信息不能为空'
				});
			 } else {
				$.post("/api/waybill/quote", {
					"send": send,
					"destination": destination,
					"shift": shift,
					"itemType": itemType,
					"vip": vip
				}, function (data, status) {
						var W = eval(weights);
						var I = eval(insuranceCharge);
						var S = eval(serviceCharge);
						var O = eval(otherCharge);
					// 成功的回调函数，解析结果
					if (data.code != 0) {
						// 未查询到所需要的对应解析方法，按照默认方法执行
						var formula = eval(insuranceCharge) + eval(serviceCharge) + eval(otherCharge);
						$("#freight").attr("value", formula);
						var f = formula + W;
						$("#totalMoney").attr("value", f);
					} else {

						for (var f in data.data) {
							console.log(data.data[f][0]);
							console.log(data.data[f][1]);
							var f_condition = data.data[f][0];
							var f_statement = data.data[f][1];
							console.info("eval(f_condition)"+eval(f_condition));
							if (eval(f_condition)) {
								var implement = eval(f_statement);
							}
						}
						var money = implement + I + S + O;
						$("#freight").attr("value", implement);
						$("#totalMoney").attr("value", money);
					}
				})
			 }
		})
	});
	</script>
</body>
</html>